<template>
  <div class='DiagnosisScannerManagement'>
    <div class='headerTop'>
      <el-button plain size="mini" @click="dialogFormVisible = true">新增扫描仪</el-button>
    </div>
    <div class='headerBox' >
      <div class='headerBoxItem' v-for='item in 4' :key='item'>
        <div class='title'>{{item}}号</div>
        <div class='content'>
          <div class='left'>
            <div class='leftTop'>
              <div>
                <div class='circle red'></div>
                离线
              </div>
              <div>
                <div class='circle green'></div>
                自动扫描中
              </div>
            </div>
            <div class='leftCenter'>
              <el-button plain size="mini">联通测试</el-button>

            </div>
            <div class='leftBottom'>
              <div>东院 切片扫描室</div>
              <div>徕卡apperio211 400片</div>
              <div>192.168.11</div>
            </div>
          </div>
          <div  class='right'>
            <el-image style="width: 100px; height: 60px"
              src="/images/login-bg1.png"
            />
          </div>
        </div>

      </div>

    </div>
    <base-table ref="biopsyTable" :data="biopsyTable.data" :header="biopsyTable.header" :operation="biopsyTable.operation"
                :pageInfo="biopsyTable.pageInfo" :selected="false" @handleClick="biopsyTableButtonClick"
                @pageJumpTo="biopsyTablePageJumpTo" @sizeChange="biopsyTableSizeChange"></base-table>
    <el-dialog title="新增扫描仪" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="140px" >
        <el-row class="el-row">
          <el-col :span="12">
            <el-form-item label="扫描仪标识" >
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="1" value="shanghai"></el-option>
                <el-option label="2" value="beijing"></el-option>
                <el-option label="3" value="shenzhen"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" >
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="在用" value="shanghai"></el-option>
                <el-option label="停用" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="扫描仪型号和配置" >
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="el-row">
          <el-col :span="12">
            <el-form-item label="扫描仪安放位置" >
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="东院" value="shanghai"></el-option>
                <el-option label="西院" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" label-width="20px" >
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="管理电脑IP地址" >
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="切片上传方式" >
              <el-radio-group v-model="form.radio">
                <el-radio :label="0">本地文件夹上传</el-radio>
                <el-radio :label="1">网络存储盘上传</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="切片文件夹位置" >
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备份文件夹位置" >
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="扫描仪图片" >
              <div class="image-box" >
                <img :src="form.url" style="width: 100px; height: 100px"
                     alt="扫描仪图片" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
      </div>
    </el-dialog>



  </div>

</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';
export default {
  name: 'DiagnosisScannerManagement',
  components: {
    BaseTable,
  },
  data(){
    return{
      biopsyTable: {
        data: [],
        header: [
          {
            label: '扫描仪标识',
            prop: 'biopsyHistoryId',
            width: '120',
          },
          {
            label: '状态',
            prop: 'uploadStatusName',
            width: '107',
          },
          {
            label: '型号和配置',
            prop: 'pathologyId',
            width: '120',
          },
          {
            label: '安装位置',
            prop: 'level',
            width: '107',
          },
          {
            label: '管理电脑IP',
            prop: 'description',
          },
          {
            label: '切片上传方式',
            prop: 'description',
          },
          {
            label: '文件夹位置',
            prop: 'description',
          },
          {
            label: '扫描仪图片',
            prop: 'description',
          },

        ],
        operation: [
          {
            label: '编辑',
            functionKey: 'biopsyTableEdit',
          },
        ],
        // 分页信息
        pageInfo: {
          size: itemsPerPage.get(),
          page: 1,
          total: 0,
        },
      },
      dialogFormVisible:false,
      form:{

      },

    }
  },
  methods:{
    // 表格 - 按钮点击
    biopsyTableButtonClick(functionKey, row) {
      this[functionKey](row);
    },
    // TODO 表格 - 编辑
    biopsyTableEdit(row) {
      this.labelUrl = row.labelUrl;
      this.pBiopsyId = row.id;
      // this.diagnosisDialogOpen(row.pathologyId);
    },
    // 分页跳转
    biopsyTablePageJumpTo(val) {
      this.biopsyTable.pageInfo.page = val;
      this.biopsyTableRequest();
    },
    // 每页显示数量改变
    biopsyTableSizeChange(val) {
      this.biopsyTable.pageInfo.size = val;
      this.biopsyTableRequest();
    },
    biopsyTableRequest(){

    },
  }
};
</script>

<style scoped >
.headerTop{
  /*margin: 0 auto;*/
  text-align: center;
}
.headerBox{
  display: flex;
  flex-wrap: wrap;
}

.headerBoxItem{
  width: 300px;
  height: 200px;
  border-radius: 20px;
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.3);
  margin: 20px;
  padding: 10px;
}
.headerBoxItem .title{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}
.headerBoxItem .content{
  display: flex;
  font-size: 14px;
}
.headerBoxItem .content .left{
  width: 50%;
}
.headerBoxItem .content .left .leftTop{
  display: flex;
  justify-content: space-around;
}
.left .leftTop .circle{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto;
}
.left .leftTop .red{
  background-color: red;
}
.left .leftTop .green{
  background-color: green;

}
.left .leftCenter{
  text-align: center;
  margin: 5px 0;
}
.left .leftBottom div{
  margin: 5px 0;
}
.headerBoxItem .content .right{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-box{
  width: 100px;
  height: 100px;
  border: 1px solid #eeeeee;
}



.el-row {
  margin-bottom: 12px;
}
.el-row /deep/ .el-form-item__error {
  padding-top: 0;
}
/* 更改input被禁止时的颜色 */
::v-deep .el-input.is-disabled .el-input__inner {
  color: #2c3e50;
}

</style>